<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="content-language" content="en-EN" />
    <meta name="robots" content="noindex, nofollow" />
    
    <title>JEELIZ FACEFILTER: CASA DE PAPEL</title>
    
    <!-- INCLUDE JEELIZ FACEFILTER SCRIPT -->
    <script src="../../../dist/jeelizFaceFilter.js"></script>

    <!-- INCLUDE THREE.JS -->
    <script src="../../../libs/three/v97/three.min.js"></script>

    <!-- INCLUDE JEELIZ THREE.JS HELPER -->
    <script src="../../../helpers/JeelizThreeHelper.js"></script>

    <!-- INCLUDE ADDDRAGEVENTLISTENER.JS -->
    <script src="../../../helpers/addDragEventListener.js"></script>

    <!-- INCLUDE JEELIZRESIZER -->
    <script src="../../../helpers/JeelizResizer.js"></script>

    <!-- INCLUDE BUFFERLOADER -->
    <script src='../../../libs/bufferLoader/BufferLoader.js'></script>

    <!-- INCLUDE DEMO SCRIPT -->
    <script src="./main.js"></script>

    <!-- INCLUDE FORK ME ON GITHUB BANNER -->
    <script src="../../appearance/widget.js"></script>

    <link rel="stylesheet" href="../../appearance/style.css" type="text/css" />

    <style>
      #buttonPlayAudio {
        background: #7a081e;
        padding: 10px 15px;
        font-size: 12pt;
        border: none;
        border-radius: 30px;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 100000;
        color: white;
        box-shadow: 0 0 10px rgba(0,0,0,0.5), 0 3px 5px rgba(0,0,0,0.3);
        cursor: pointer;
        transition: opacity 0.2s ease-in-out;
      }
      #buttonPlayAudio:hover {
        opacity: 0.8;
      }
      .disabled {
        pointer-events: none;
        opacity: 0.5;
      }
    </style>
  </head>
  
  <body>
    <canvas width="600" height="600" id='jeeFaceFilterCanvas'></canvas>
    <button
      onclick='play_audio()'
      id='buttonPlayAudio'
      class='disabled'
    >
      Play theme
    </button>
  </body>
</html>
 
 
